<!DOCTYPE html>
<html style="overflow: hidden;">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>数据详情</title>
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/detail_R.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.css" />
		<link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
		<style>
			/*此处必须让这些元素overflow*/
			
			#datas,
			.info_nav,
			#btn_base,
			.echarts_content {
				overflow: hidden;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #21202d;
			}
			
			.swiper-pagination-fraction,
			.swiper-pagination-custom,
			.swiper-container-horizontal>.swiper-pagination-bullets {
				bottom: 0px;
			}
			
			.hui-wrap .E_switch .switch_Container {
				width: 100%;
				padding: 0;
			}
			
			.Contrast {
				display: inline-block;
				height: 30px;
			}
			/*.title_container {
  width: 92%;
  height: 20px;
  background: #21202d;
}
.hui-wrap .echarts_content .title_container #name_unit {
  background: #21202d;
  color: #fff;
}
.hui-wrap .echarts_content .title_container .K_or_L {
  background: #21202d;
  height: 100%;
}
	*/
		</style>
	</head>

	<body style=" background: #21202d;">
		<div id="datas" class="hui-wrap">
			<div style="height: 22px;background: #464646;"></div>
			<!--top部分-->
			<div class="info_nav">
				<div id="hui-back"></div>
				<h2 class="base_name title-txt">金山西瓜基地</h2>
				<div class="data_Contrast" onclick="data_DB();">对比</div>
			</div>
			<div style="height: 11vh;">
				<button type="button" class="hui-button hui-button-large" id="btn_base" style="position: relative;">
					<i style="position: absolute; left: 14px;font-size: 24px;" class="hui-icons hui-icons-down"></i>
					<p>切换基地指标</p>
				</button>
				<!--日 周 月 年 切换-->
				<div style="height: 3px; width: 100%; background: #828998;"></div>

				<div class="E_switch">

					<!--<div style="height: 2px; width: 100%; background: #3f4251;"></div>-->

				</div>

			</div>

			<div class="swiper-container" style="height: 77vh;">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="height: 77vh;">
						<div class="title_container" style="height: 3vh; text-align: left; display: flex;">
							<p id="name_unit" style="color: #fff;flex-grow:1; padding-left: 15px;"></p>
							<b class="Contrast" style="flex-grow:1;text-align: right; padding-right: 15px; color: #fff;">比较</b>

						</div>
						<div id="chart_L" style="width: 100%;height: 74vh; box-sizing: border-box; padding-bottom: 10px;">

						</div>
					</div>
					<div class="swiper-slide" style="height: 77vh;">
						<div class="YMD_more" style="">
							<span class="time" style="">时</span>
							<span class="day active" style="">日</span>
							<span class="week" style="">周</span>
							<span class="month" style="">月</span>
							<span class="season" style="">季</span>
							<span class="year" style="">年</span>
							<b class="more" style="">更多</b>
							<!--<b class="Contrast" style="">比较</b>-->
						</div>
						<div class="switch_Container" style="width: 100%; position: absolute; display: none;">
							<div class='swipe day_Time' style="background: #828998;height: 35px;">
								<div style="width: 100%; height: 100%; display: flex;">
									<div id="startSelectDate" style="flex-grow: 6;box-sizing: border-box; padding: 6px;">
										<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">                     
								        <span data-year="" data-month="" data-date="" id="startShowDate">点击选择开始时间</span>  
								    </em>
									</div>
									<span style="flex-grow: 1; line-height: 35px; text-align: center;">至</span>
									<div id="endSelectDate" style="flex-grow: 6; box-sizing: border-box; padding: 6px;">
										<em class="pc-box" style="display: inline-block; width: 100%; text-align: center; background: #f4f4f4;border-radius: 4px; font-size: 14px;">                     
								        <span data-year="" data-month="" data-date="" id="endShowDate">点击选择结束时间</span>  
								    </em>
									</div>
								</div>
							</div>
						</div>
						<div class="title_container" style="height: 3vh;">
							<p id="name_unit" style="color: #fff; text-align: left; padding-left: 15px;"></p>
						</div>

						<div id="chart_K" style="width: 100%;height: 70vh; box-sizing: border-box; padding-bottom: 20px;">

						</div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>

		</div>

		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/iosSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/hui-picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/obj/my.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/func/swiper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var tName = getValue("name");
			var stid = getValue("sid"); //指标编号
			var tid = getValue("tid"); //指标类型编号
			var tUnit = getValue("unit"); //指标单位
			var Sensor_Base = getValue("base"); //从首页进来的基地ID
			var Sensor_Name = getValue("sensorN"); //从首页进来的基地名字
			hui(".title-txt").html(tName);
			hui('#btn_base p').html(Sensor_Name + ' ' + tName);
			hui('#name_unit').html(tName + '统计');
			//console.log(tName);
			//console.log(stid);
			//console.log(tid);
			//console.log(tUnit);
			//console.log(Sensor_Base);
			//console.log(Sensor_Name);
			var LineNum = 1; // 判断是否需要重置折线图
			var Id_Contrast = [];
			var TId_Contrast = [];
			var Name_Contrast = [];
			var E_Name1, E_Name2, E_Name3, E_Name4, E_Name5;

			function removeStorage() {
				Id_Contrast = [];
				TId_Contrast = [];
				Name_Contrast = [];
			}
			//	removeStorage(
			//点击添加对比按钮
			hui('.Contrast').click(function() {
				//判断是否已经有需要对比的数据  如果没有 创建缓存对象 存入第一个需要对比的数据ID
				if(localStorage.hasOwnProperty('ID_Contrast') == false && localStorage.hasOwnProperty('TId_Contrast') == false) {
					Id_Contrast.push(stid); //将ID存入数组
					TId_Contrast.push(tid); //将tid存入数组
					hui.iconToast('添加成功', 'success');
					E_Name1 = tName + tUnit; //将数据名字和单位拼接在一起
					localStorage.setItem('ID_Contrast', JSON.stringify(Id_Contrast)); //存入第一个ID
					localStorage.setItem('TId_Contrast', JSON.stringify(TId_Contrast)); //存入第一个TID
					localStorage.setItem('E_Name1', JSON.stringify(E_Name1)); //存入第一个名字和单位

					console.log(localStorage.getItem('ID_Contrast'));
					console.log(localStorage.getItem('TId_Contrast'));
					console.log(JSON.parse(localStorage.getItem('E_Name1')));
				} else { // 如果有 获取到缓存里面的数据 重新赋值给数组 将第二个需要对比的数据ID push到数组 重新存入 缓存
					Id_Contrast = JSON.parse(localStorage.getItem('ID_Contrast')); //获取到缓存里面的数据 重新赋值给数组
					TId_Contrast = JSON.parse(localStorage.getItem('TId_Contrast')); //获取到缓存里面的数据 重新赋值给数组
					var ID_con = JSON.parse(localStorage.getItem('ID_Contrast'));
					var TId_con = JSON.parse(localStorage.getItem('TId_Contrast'));
					var Con_length = JSON.parse(localStorage.getItem('ID_Contrast')).length;

					//第二次开始  判断每次存入对比缓存里是否有相同的数据
					for(var i = 0; i < Con_length; i++) {
						if(stid == ID_con[i] && tid == TId_con[i]) {
							alert('请勿添加重复数据!');
							return
						}
					}

					//前面判断都通过后  将数据push到数组  重新存入 缓存
					if(Id_Contrast.length < 5 && TId_Contrast.length < 5) {

						Id_Contrast.push(stid); //将数据push到数组
						TId_Contrast.push(tid); //将数据push到数组
						hui.iconToast('添加成功', 'success');
						localStorage.setItem('ID_Contrast', JSON.stringify(Id_Contrast)); //重新存入 缓存
						localStorage.setItem('TId_Contrast', JSON.stringify(TId_Contrast)); //重新存入 缓存
						//				alert("length:" + Id_Contrast.length);
					} else if(Id_Contrast.length == 5 && TId_Contrast.length == 5) {
						//限制最多对比五条数据
						hui.alert('最多添加五条对比数据!', '确定', function() {
							return
						})
					} else {}

					//			alert(JSON.parse(localStorage.getItem('ID_Contrast')));
					//			alert(JSON.parse(localStorage.getItem('TId_Contrast')));
					// 同时存入此次对比数据的名字和单位
					if(JSON.parse(localStorage.getItem('ID_Contrast')).length == 2) {
						E_Name2 = tName + tUnit;
						localStorage.setItem('E_Name2', JSON.stringify(E_Name2));

					}
					// 同时存入此次对比数据的名字和单位
					if(JSON.parse(localStorage.getItem('ID_Contrast')).length == 3) {
						E_Name3 = tName + tUnit;
						localStorage.setItem('E_Name3', JSON.stringify(E_Name3));
					}
					// 同时存入此次对比数据的名字和单位
					if(JSON.parse(localStorage.getItem('ID_Contrast')).length == 4) {
						E_Name4 = tName + tUnit;
						localStorage.setItem('E_Name4', JSON.stringify(E_Name4));
					}
					// 同时存入此次对比数据的名字和单位
					if(JSON.parse(localStorage.getItem('ID_Contrast')).length == 5 && localStorage.hasOwnProperty('E_Name5') == false) {
						E_Name5 = tName + tUnit;
						localStorage.setItem('E_Name5', JSON.stringify(E_Name5));
					}
				}

			})

			//时间选择
			//		$('.switch_Container').hide();
			$('.more').click(function() {
				if($('.switch_Container').is(':hidden')) {
					$('.switch_Container').show();
					$('#chart_K').css({
						'height': '68vh'
					})
				} else {
					$('.switch_Container').hide();
					//				$('#chart_K').css({'height':'70vh'})
				}
			})
			var startSelectDateDom = $('#startSelectDate');
			var startShowDateDom = $('#startShowDate');

			var endSelectDateDom = $('#endSelectDate');
			var endShowDateDom = $('#endShowDate');
			
			//DatePicker选择器需要用到的选择器
			
			
			// 初始化时间
			var now = new Date();
			var nowYear = now.getFullYear();
			var nowMonth = now.getMonth() + 1;
			var nowDate = now.getDate();
			nowMonth = nowMonth < 10 ? ('0' + nowMonth) : nowMonth;
			nowDate = nowDate < 10 ? ('0' + nowDate) : nowDate;

			startShowDateDom.attr('data-year', nowYear);
			startShowDateDom.attr('data-month', nowMonth);
			startShowDateDom.attr('data-date', nowDate);

			endShowDateDom.attr('data-year', nowYear);
			endShowDateDom.attr('data-month', nowMonth);
			endShowDateDom.attr('data-date', nowDate);

			// 数据初始化
			function formatYear(nowYear) {
				var arr = [];
				for(var i = nowYear - 5; i <= nowYear + 5; i++) {
					arr.push({
						id: i + '',
						value: i + '年'
					});
				}
				return arr;
			}

			function formatMonth() {
				var arr = [];
				for(var i = 1; i <= 12; i++) {
					if(i < 10) {
						i = '0' + i;
					}
					arr.push({
						id: i + '',
						value: i + '月'
					});
				}
				return arr;
			}

			function formatDate(count) {
				var arr = [];
				for(var i = 1; i <= count; i++) {
					if(i < 10) {
						i = '0' + i;
					}
					arr.push({
						id: i + '',
						value: i + '日'
					});
				}
				return arr;
			}
			var yearData = function(callback) {
				callback(formatYear(nowYear))
			}
			var monthData = function(year, callback) {
				callback(formatMonth());
			};
			var dateData = function(year, month, callback) {
				if(/^(01|03|05|07|08|10|12)$/.test(month)) {
					callback(formatDate(31));
				} else if(/^(04|06|09|11)$/.test(month)) {
					callback(formatDate(30));
				} else if(/^02$/.test(month)) {
					if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
						callback(formatDate(29));
					} else {
						callback(formatDate(28));
					}
				} else {
					throw new Error('month is illegal');
				}
			};

			startSelectDateDom.bind('click', function() {
				var oneLevelId = startShowDateDom.attr('data-year');
				var twoLevelId = startShowDateDom.attr('data-month');
				var threeLevelId = startShowDateDom.attr('data-date');
				var fourLevelId = startShowDateDom.attr('data-hour');
				var fiveLevelId = startShowDateDom.attr('data-minute');
				startDateTime(startShowDateDom, oneLevelId, twoLevelId, threeLevelId);

			});
			endSelectDateDom.bind('click', function() {
				var oneLevelId = endShowDateDom.attr('data-year');
				var twoLevelId = endShowDateDom.attr('data-month');
				var threeLevelId = endShowDateDom.attr('data-date');
				var fourLevelId = endShowDateDom.attr('data-hour');
				var fiveLevelId = endShowDateDom.attr('data-minute');
				endDateTime(endShowDateDom, oneLevelId, twoLevelId, threeLevelId);

			});

			var timeNum = 0;

			function startDateTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId) {
				var iosSelect = new IosSelect(3, [yearData, monthData, dateData], {
					title: '时间选择',
					itemHeight: 35,
					itemShowCount: 7,
					oneLevelId: oneLevelId,
					twoLevelId: twoLevelId,
					threeLevelId: threeLevelId,
					callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
						ShowDateDom.attr('data-year', selectOneObj.id);
						ShowDateDom.attr('data-month', selectTwoObj.id);
						ShowDateDom.attr('data-date', selectThreeObj.id);
						ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
						if(timeNum > 0) {
							SETime();
						}
						/*setTimeout(function() {
							$('.switch_Container').hide();
						}, 10000)*/
					}
				});
			}

			function endDateTime(ShowDateDom, oneLevelId, twoLevelId, threeLevelId) {
				var iosSelect = new IosSelect(3, [yearData, monthData, dateData], {
					title: '时间选择',
					itemHeight: 35,
					itemShowCount: 7,
					oneLevelId: oneLevelId,
					twoLevelId: twoLevelId,
					threeLevelId: threeLevelId,
					callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
						ShowDateDom.attr('data-year', selectOneObj.id);
						ShowDateDom.attr('data-month', selectTwoObj.id);
						ShowDateDom.attr('data-date', selectThreeObj.id);
						ShowDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
						SETime()
						timeNum++;
						/*setTimeout(function() {
							$('.switch_Container').hide();
						}, 10000)*/
					}
				});
			}

			function SETime() {
				if(startShowDateDom.text() == '点击选择开始时间') {
					hui.alert('请选择数据开始时间！！', '好的', function() {
						return false;
					})
					return false;
				}
				/*if(endShowDateDom.text() == '点击选择结束时间'){
	    		hui.alert('请选择数据结束时间！！','好的',function(){
					return false;
				})
	    		return false;
	    	}*/
				if(startShowDateDom.text() != '点击选择开始时间' && endShowDateDom.text() != '点击选择结束时间') {
					var reg = /[\u4e00-\u9fa5]/g;
					var startTime = $('#startShowDate').text();
					var endTime = $('#endShowDate').text();
					startTime = startTime.substring(0, 4) + startTime.substring(6, 8) + startTime.substring(10, 12);
					endTime = endTime.substring(0, 4) + endTime.substring(6, 8) + endTime.substring(10, 12);
					//				alert(startTime+'---'+endTime);
					if(startTime >= endTime) {
						alert('请选择正确的时间格式');
						return false;
					} else if(startTime < endTime) {
						DWMY_url = baseURL() + "/target_handler.ashx?action=target_day";
						refresh(DWMY_url, startTime, endTime, 0);
						hui('.day').addClass('active').siblings('span').removeClass('active');
						$('.switch_Container').hide();
					}

				}

			}

			

			function data_DB() {
				hui.open('data_Contrast.html', {}, true, {});
			}
			hui('.YMD_more span').click(function() {
				hui(this).addClass('active').siblings('span').removeClass('active');
				$('.switch_Container').hide();
				//hui('.day_Time').css({visibility:'hidden'});
				ifYMD();
			});

			var chart_L = document.getElementById('chart_L');
			chart_L.addEventListener('touchstart', function() {

				//chart_L.parentNode.classList.add('swiper-no-swiping');
				//option1.dataZoom[0].moveOnMouseMove = false;
			})
			chart_L.addEventListener('touchend', function() {
				//chart_L.parentNode.classList.remove('swiper-no-swiping');

				//option1.dataZoom[0].moveOnMouseMove = true; 
			})

			var isNum = 1; //判断此值  (等于1时，说明从首页进入,需要将select默认选中首页进入此页面的基地)   

			// 选中默认基地
			(function Base_default() {
				let detailColumn = JSON.parse(localStorage.getItem('detailColumn'));
				console.log(detailColumn)
				//var columnN = Number(Sensor_Base); // 将基地Id转换为number类型
				//var columnN = detailColumn[1]; // 将基地Id转换为number类型
				//请求当前基地下面的指标
				if(isNum == 1) {
					getSensorList(detailColumn);
					isNum++;
				}
			})()

			//	切换基地函数
			/*function Selected(column){
				//实参为string类型
				var columnN = Number(column);	//将实参转换为number类型
				//切换指标时  加载指标数据
				if(isNum != 1){
					getSensorList(columnN); 	// 此处传number类型数据
				}
				setTimeout(function(){
					Op_tab(); //调用切换指标重新请求数据
				},2000)
				
			}*/

			//切换指标重新请求数据
			/*function Op_tab(){
		var index = document.getElementById('option_Name').selectedIndex;  //获取select选项的index
        tName = document.getElementById('option_Name').options[index].innerHTML; //重置ECharts需要用到的指标项名字
        tUnit = document.getElementById('option_Name').options[index].getAttribute('data-unit'); //重置ECharts需要用到的指标项名字
		stid = document.getElementById('option_Name').options[index].value;  //  Id
		tid = document.getElementById('option_Name').options[index].getAttribute('data-tid');		//	TargetId
		hui(".title-txt").html(tName);
		
		
		refresh(DWMY_uel,starttime,endtime,startValue);		//切换指标重新调用数据请求函数
	}*/

			var K_dataValues = []; //Echarts图标K线图的具体数据
			var L_dataValues = []; //Echarts图标折线图的具体数据
			var dataTimes = []; //Echarts图标的时间轴数据
			var now = dateFtt("yyyyMMdd", new Date());
			var DWMY_url = '',
				starttime = 0,
				endtime = 0; // 此处声明全局变量 用于切换指标 去传递参数

			//日月年选择函数
			function ifYMD() {
				var date = new Date();
				var month = date.getMonth() + 1; //month_S获取当前月份  
				var day = date.getDate(); //当前日期
				var week; //七天前日期
				month < 10 ? month = "0" + month : month;
				day < 10 ? day = "0" + day : day;
				
				
				
				//获取前7天的时间戳		
				(function getTaskTime(strDate) {
					//获取前七天日期函数
					var Seavedate = new Date(strDate);
					var y = Seavedate.getFullYear();
					var m = Seavedate.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = Seavedate.getDate();
					d = d < 10 ? ('0' + d) : d;
					week = String(y) + String(m) + String(d) + '00';
					//console.log(week);
				})(date.setDate(date.getDate() - 50))


				
				//时数据请求
				if(hui('.time').hasClass('active')) {
					//重置url
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_hour";
		
					var curDate = new Date();
           			var stringDate = dateFtt ("yyyyMMdd",new Date(curDate.getTime() - 50*24*60*60*1000));
           			console.log("50天前:"+ stringDate);
					
					starttime = stringDate + "00";
					endtime = now.trim() + "23";

					refresh(DWMY_url, starttime, endtime, 0);
				}

				//日数据请求
				if(hui('.day').hasClass('active')) { 
					//重置url
					var riDate = new Date();
					var riMonth = riDate.getMonth() + 1; //month_S获取当前月份  
					var riDay = riDate.getDate(); //当前日期
					
					riMonth < 10 ? riMonth = "0" + riMonth : riMonth;
					riDay < 10 ? riDay = "0" + riDay : riDay;
					
					//console.log('日数据：' + (riDate.getFullYear() + "-" + riMonth + riDay).replace("-", "")); 
					
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_day";
					starttime = ((riDate.getFullYear() - 1) + "-" + riMonth + riDay).replace("-", "");
					endtime = (riDate.getFullYear() + "-" + riMonth + riDay).replace("-", "");
					
					//console.log('日数据：' + starttime + '---' + endtime);
					
					refresh(DWMY_url, starttime, endtime, 200);
				}

				//周数据请求
				if(hui('.week').hasClass('active')) {
					//重置url
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_week";
					var zhouDate = new Date();
					var zhouMonth = zhouDate.getMonth() + 1; //month_S获取当前月份  
					var zhouDay = zhouDate.getDate(); //当前日期
					
					zhouMonth < 10 ? zhouMonth = "0" + zhouMonth : zhouMonth;
					zhouDay < 10 ? zhouDay = "0" + zhouDay : zhouDay;
					
					starttime = ((zhouDate.getFullYear() - 1) + "-" + zhouMonth + zhouDay).replace("-", "");
					endtime = (zhouDate.getFullYear() + "-" + zhouMonth + zhouDay).replace("-", "");
					refresh(DWMY_url, starttime, endtime, 0);
				}
				//月数据请求
				if(hui('.month').hasClass('active')) {
					//重置url
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_month";
					
					
					var yueDate = new Date();
					var yueMonth = yueDate.getMonth() + 1; //month_S获取当前月份  
					
					yueMonth < 10 ? yueMonth = "0" + yueMonth : yueMonth;
					
					starttime = ((yueDate.getFullYear() - 1) + "-" + yueMonth).replace("-", "");
					endtime = (yueDate.getFullYear() + "-" + yueMonth).replace("-", "");

					console.log("月数据请求:" + DWMY_url);
					console.log("月数据:" + starttime + "|" + endtime);

					refresh(DWMY_url, starttime, endtime, 0);
				}

				//季数据请求
				if(hui('.season').hasClass('active')) {
					//重置url
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_quarter";
					
					var jiDate = new Date();
					var jiMonth = jiDate.getMonth() + 1; //month_S获取当前月份  
					
					jiMonth < 10 ? jiMonth = "0" + jiMonth : jiMonth;
					
					starttime = ((jiDate.getFullYear() - 1) + "-" + jiMonth).replace("-", "");
					endtime = (jiDate.getFullYear() + "-" + jiMonth).replace("-", "");
					refresh(DWMY_url, starttime, endtime, 0);
				}
				//年数据请求
				if(hui('.year').hasClass('active')) {
					//重置url
					DWMY_url = baseURL() + "/target_handler.ashx?action=target_year";
					
					var nianDate = new Date();
					
					starttime = nianDate.getFullYear() - 1;
					endtime = nianDate.getFullYear();
					refresh(DWMY_url, starttime, endtime, 0);
				}
			}
			ifYMD();

			var base_picker = [{
				value: Sensor_Base,
				text: Sensor_Name,
				children: []
			}];
			var baseADD = [];
			//指标数据请求函数

			function getSensorList(column) {
				console.log(column)
				var columnId
				

				var url = baseURL() + "/gateway_handler.ashx?action=gateway_target_cache";
				var param = {
					gid: column.Id,
					num: column.Number,
				};
				datas.list = []; //将vue存放数据的数字置空
				postJson(url, param, function(ret) {
					//			console.log("基地指标：" + JSON.stringify(ret.data.length));
					var dataLength = ret.data.length;
					//			datas.list = ret.data;  //将请求到的数据赋值给vue实例去渲染
						console.log(ret.data);
					//将获取到的数据遍历添加到picker所需要的数组
					for(var i = 0; i < dataLength; i++) {
						console.log(ret.data[i]);
						if(ret.data[i].TargetType != 99){
							base_picker[0].children.push({
								value: ret.data[i].Id + '|' + ret.data[i].TargetId,
								text: ret.data[i].TargetName + ret.data[i].TargetUnit
							});
						}
					}

					//console.log("基地指标：" + JSON.stringify(base_picker[0]));

					//初始化picker
					var picker = new huiPicker('#btn_base', function() {
						var base_JD = picker.getText(0); //获取基地
						var base_ZB = picker.getText(1); //获取指标
						var base_ST = picker.getVal(1); //获取stid 和 tid
						//将获取到的value值切割为 stid 和 tid
						var reg = /[\u4e00-\u9fa5]/g;
						var str = base_ST.split('|');
						stid = str[0];
						tid = str[1];
						tName = base_ZB.match(reg).join("");
						tUnit = base_ZB.replace(reg, "");
						hui(".title-txt").html(tName);
						hui('#name_unit').html(tName + '统计');
						//      		tUnit = document.getElementById('option_Name').options[index].getAttribute('data-unit'); //重置ECharts需要用到的指标项名字

						LineNum = 1; //将LineNum重置为1
						var startValue = 300;
						//当数据为一周数据时  ， 设置ECharts的图表缩放比例为140
						hui('.YMD_more .day').addClass('active').siblings('span').removeClass('active');
						ifYMD();

						//refresh(DWMY_url,starttime,endtime,startValue);		//切换指标重新调用数据请求函数

						//切换指标 重新赋值按钮的html
						hui('#btn_base p').html(base_JD + ' ' + base_ZB);
					});
					//设置picker为2级联动
					picker.level = 2;
					//绑定存放数据的数组
					picker.bindRelevanceData(base_picker);
				}, function(err) {
					console.log(err);
				});
			}

			
			var LdataTimes = [];
			
			//数据请求函数	
			function refresh(timeUrl, starttime, endtime, startValue) {
				
				//alert(LineNum);
				//console.log("starttime:" +starttime);
				//每次请求前，重置存放ECharts数据存放的数组
				LdataTimes = [];
				L_dataValues = [];
				
				dataTimes = [];
				K_dataValues = [];

				var param1 = {
					stid: stid,
					tid: tid,
					stime: starttime,
					etime: endtime
				};
				
				var date = new Date();
				var month = date.getMonth() + 1; 		//month_S获取当前月份  
				var day = date.getDate();				//当前日期
				month < 10 ? month = "0" + month : month;
				day < 10 ? day = "0" + day : day;
				
				
				(function getTaskTime(strDate) {
					//获取前七天日期函数
					var date = new Date(strDate);
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					week = String(y) + String(m) + String(d) + '00';
					//console.log(week); 
				})(date.setDate(date.getDate() - 50))
				
				hui.loading("正在获取数据...");
				
				
				
				if(LineNum == 1) {
					var lineDate = new Date();	//注意  结束时间必须要重新new Date() 否则会造成时间报错
					var lineMonth = lineDate.getMonth() + 1; 		//month_S获取当前月份  
					var lineDay = lineDate.getDate();				//当前日期
					lineMonth < 10 ? lineMonth = "0" + lineMonth : lineMonth;
					lineDay < 10 ? lineDay = "0" + lineDay : lineDay;
					
					
					var paramHour = {
						stid: stid,
						tid: tid,
						stime: week,
						etime: String(lineDate.getFullYear()) + String(lineMonth) + String(lineDay) +'23',
					};
					
					var hourUrl = baseURL() + "/target_handler.ashx?action=target_hour";
					postJson(hourUrl, paramHour, function(res) {
//						console.log(res);
						for(var j = 0; j < res.data.length; j++) {
								var dt = res.data[j].MeasureTime.substring(0, 13) + '时';
								LdataTimes.push(dt);
								L_dataValues.push(res.data[j].MeasureData); //折线图数据
						}
//						console.log("L_dataValues" + JSON.stringify(L_dataValues)); 
						line_chart(500); 
						LineNum++; //++后之重置K线图   不重置折线图
					}, function(err) {
						hui.toast('当前指标暂无数据，请查看其他指标！！')
					})
				}
				
				
				postJson(timeUrl, param1, function(ret) {
					
					var maxTime, maxValue = 0;
					var minTime, minValue = 0;
					
					//当查看小时数据   时间轴需要显示具体时间
					if(hui('.time').hasClass('active')){
						for(var t = 0; t < ret.data.length; t++) {
							var dt = ret.data[t].MeasureTime.substring(0, 13) + '时';
							dataTimes.push(dt);
							K_dataValues.push([ret.data[t].MeasureFirstData, ret.data[t].MeasureLastData, ret.data[t].MeasureMinData, ret.data[t].MeasureMaxData]); //K线图数据
						}
					}else{
						for(var t = 0; t < ret.data.length; t++) {
								
							var dt = ret.data[t].MeasureTime.substring(0, 10);
							dataTimes.push(dt);
							K_dataValues.push([ret.data[t].MeasureFirstData, ret.data[t].MeasureLastData, ret.data[t].MeasureMinData, ret.data[t].MeasureMaxData]); //K线图数据
						} 
					}
					
					
					
					console.log("K_dataValues" + JSON.stringify(K_dataValues));
					startValue = 0;
					//当LineNum等于1  重置折线图
					//alert(LineNum);
					/*if(LineNum == 1) {
						getLineData();
					}*/
					LineNum++; //++后之重置K线图   不重置折线图
					K_chart(startValue);
//					hui('#startShowDate').html('点击选择开始时间');
//					hui('#endShowDate').html('点击选择结束时间');
				}, function(err) {
					hui.toast('当前指标暂无数据，请查看其他指标！！')
				})
			}

			var option1 = {},
				option2 = {};

			function line_chart(startValue) {
				option1 = {
					color: '#fd1050',

					title: {
						show: false,
						text: tName + ' ' + tUnit,
						textStyle: {
							color: '#fff',
						}
					},
					tooltip: {
						trigger: 'axis',
						showContent: true,
						confine: true,
						triggerOn: 'mousemove', 
						//position:['100%', 2], 
						textStyle: {
							width: '300px',
						},
						axisPointer: {
							//          type: 'cross'	//此属性用来显示XY轴上的集体数据  
						},
						formatter: function(params) {
							//console.log('解析数据:' + JSON.stringify(params));
							//console.log(params[0].seriesName);
							var res = params[0].name;

							if(params[0].seriesName == '风向') {
								res += '<br />';
								res += '' + params[0].seriesName;
								if(params[0].value == null || params[0].value == undefined) {
									res += ' : ' + '-';
								} else {
									res += tUnit + ' : ' + windDirection(params[0].value);
								}
							} else {
								res += '<br />';
								res += '' + params[0].seriesName;
								if(params[0].value == null || params[0].value == undefined) {
									res += ' : ' + '-';
								} else {
									res += tUnit + ' : ' + params[0].value.toFixed(2);
								}

							}
							return res;
						}
					},
					legend: {
						data: tName,
					},
					grid: {
						top: 30,
						bottom: 65,
						right: 20,
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						},
						axisPointer: {

						},
						data: LdataTimes //["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
					}],
					yAxis: [{
						scale: true,
						name: tUnit,
						splitArea: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ededed'
							}
						},
						axisLine: {
							lineStyle: {
								color: '#677283'
							}
						},
						splitLine: {
							show: true,

						},
					}],
					dataZoom: [/*{
							type: 'inside',
							startValue: 50,
							end: 100,
							moveOnMouseMove: true, 
							moveOnMouseWheel: false, 
							//          zoomLock: true,
						},*/
						{
							show: true,
							showDetail: true, 
							realtime: true,
							startValue: 50,
							end: 100,
							handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
							handleSize: '100%',
							handleStyle: {
								color: '#fff',
								shadowBlur: 3,
								shadowColor: 'rgba(0, 0, 0, 0.6)',
								shadowOffsetX: 2,
								shadowOffsetY: 2
							},
							
						},
					],
					series: [
						{
							name: tName,
							type: 'line',
							smooth: true,
							data: L_dataValues,
							formatter: function(params) {
								console.log(params);
								if (params.value > 0) {
									return params.value;
								} else {
									return '';
								}
							},
						}
					],
					animationEasingUpdate: {},
				};
				myChart1 = echarts.init(document.getElementById('chart_L'));
				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option1);
				
				myChart1.dispatchAction({//每次重置data后 重新设置展示窗口的 start end 来解决重置后ECharts画布残留上一次数据的重影
					type: 'dataZoom',
					start: 60,
					end: 100
				});
			}

			var upColor = '#fd1050';
			var upBorderColor = '#7d1a3b';
			var downColor = '#0cf49b';
			var downBorderColor = '#196f56';

			// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

			function K_chart(startValue) {
				var start = 0;
				var end = K_dataValues.length;
				if (end > 20){
					start = K_dataValues.length - 20;
				}
				
				
				option2 = {
					title: {
						show: false,
						text: tName + ' ' + tUnit,
						left: 0,
						textStyle: {
							color: '#fff',
						}
					},
					tooltip: {
						trigger: 'axis',
//						show: false,
						showContent: true,
						axisPointer: {
							//		            type: 'cross'	//此属性用来显示XY轴上的集体数据  
						},
						formatter: function(params) {
//							console.log('解析数据:' + JSON.stringify(params));
							var res = params[0].name;
							

							if(params[0].seriesName == '风向') { //windDirection(num)
								if(params[0].value[1] == undefined || params[0].value[1] == null) {
									res += '<br />';
									res += '开始 : ' + '-';
								} else {
									res += '<br />';
									res += '开始 : ' + windDirection(params[0].value[1]);
								}
								if(params[0].value[2] == undefined || params[0].value[2] == null) {
									res += '<br />';
									res += '结束 : ' + '-';
								} else {

									res += '<br />';
									res += '结束 : ' + windDirection(params[0].value[2]);
								}
								if(params[0].value[3] == undefined || params[0].value[3] == null) {
									res += '<br />';
									res += '最低 : ' + '-';
								} else {

									res += '<br />';
									res += '最低 : ' + windDirection(params[0].value[3]);
								}
								if(params[0].value[4] == undefined || params[0].value[4] == null) {
									res += '<br />';
									res += '最高 : ' + '-';
								} else {

									res += '<br />';
									res += '最高 : ' + windDirection(params[0].value[4]);
								}

								/*res += '<br />';
								res += '' + windDirection(params[0].value[2]);
								res += '<br />';
								res += '最低 : ' + windDirection(params[0].value[3]);
								res += '<br />';
								res += '最高 : ' + windDirection(params[0].value[4]);*/
							} else {
								for(var i = params.length - 1; i >= 0; i--) {
									if(params[i].value instanceof Array) {
										//							res += ' ' + params[i].seriesName;
										//								res += '<br />';
										if(params[i].value[1] == undefined) {
											res += '<br />';
											res += '开始 : ' + '-';
										} else {
											res += '<br />';
											res += '开始 : ' + params[i].value[1].toFixed(2) + tUnit;
										}

										if(params[i].value[2] == undefined || params[i].value[2] == null) {
											res += '<br />';
											res += '结束 : ' + '-';
										} else {
											res += '<br />';
											res += '结束 : ' + params[i].value[2].toFixed(2) + tUnit;
										}
										if(params[i].value[3] == undefined || params[i].value[3] == null) {
											res += '<br />';
											res += '最低 : ' + '-';
										} else {
											res += '<br />';
											res += '最低 : ' + params[i].value[3].toFixed(2) + tUnit;
										}
										if(params[i].value[4] == undefined || params[i].value[4] == null) {
											res += '<br />';
											res += '最高 : ' + '-';
										} else {
											res += '<br />';
											res += '最高 : ' + params[i].value[4].toFixed(2) + tUnit;
										}
										/*res += '<br />';
										res += '结束 : ' + params[i].value[2] + tUnit;
										res += '<br />';
										res += '最低 : ' + params[i].value[3] + tUnit;
										res += '<br />';
										res += '最高 : ' + params[i].value[4] + tUnit;*/
									} else {
										res += '<br />';
										res += '' + params[i].seriesName;
										res += ' : ' + params[i].value + tUnit;
									}
								}
							}

							return res;
						}
					},
					legend: {
						data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
					},
					grid: {
						top: 30,
						bottom: 65,
						right: 20,
					},
					xAxis: {
						type: 'category',

						data: dataTimes,
						scale: true,
						boundaryGap: false,
						axisLine: {
							onZero: false,
							lineStyle: {
								color: '#677283'
							},
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#ededed'
							}
						},
						splitLine: {
							show: false
						},
						//		        splitNumber: 20,
						min: 'dataMin',
						max: 'dataMax'
					},
					yAxis: [{
							scale: true,
							name: tUnit,
							splitArea: {
								show: false
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: '#ededed'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#677283'
								}
							},
							splitLine: {
								show: true,

							},
						},
						{
							type: 'value',
							show: false,
							scale: true,
							splitArea: {
								show: true
							},
							name: "单位: " + tUnit //这里是纵轴标题
						}
					],
					dataZoom: [/*{
							type: 'inside',
							start: 50,
							end: 100,
						},*/
						{
							show: true,
							realtime: true,
							start: 80,
							end: 100,
							handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
							handleSize: '100%',
							handleStyle: {
								color: '#fff',
								shadowBlur: 3,
								shadowColor: 'rgba(0, 0, 0, 0.6)',
								shadowOffsetX: 2,
								shadowOffsetY: 2
							}
						},
					],
					series: [{ //K线图
							name: tName,
							type: 'candlestick',
							connectNulls: true,
							data: K_dataValues, // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
							itemStyle: {
								normal: {
									color: upColor,
									color0: downColor,
									borderColor: upBorderColor,
									borderColor0: downBorderColor
								}
							},
							markPoint: {
								/*label: {
								    normal: {
								        formatter: function (param) {
								            return param != null ? Math.round(param.value) : '';
								        }
								    }
								},*/
								data: [
									/*{
									    name: 'XX标点',
									    coord: ['2013/5/31', 2300],
									    value: 2300,
									    itemStyle: {
									        normal: {color: 'rgb(41,60,85)'}
									    }
									},*/
									/*{
									    name: 'highest value',
									    type: 'max',
									    valueDim: 'highest'
									},
									{
									    name: 'lowest value',
									    type: 'min',
									    valueDim: 'lowest'
									},
									{
									    name: 'average value on close',
									    type: 'average',
									    valueDim: 'close'
									}*/
								],
								/*tooltip: {
								    formatter: function (param) {
								        return param.name + '<br>' + (param.data.coord || '');
								    }
								}*/
							},
							markLine: {
								symbol: ['none', 'none'],
								data: [
									[{
											/*name: 'from lowest to highest',
											type: 'min',
											valueDim: 'lowest',
											symbol: 'circle',
											symbolSize: 10,
											label: {
											    normal: {show: false},
											    emphasis: {show: false}
											}*/
										},
										{
											/*type: 'max',
											valueDim: 'highest',
											symbol: 'circle',
											symbolSize: 10,
											label: {
											    normal: {show: false},
											    emphasis: {show: false}
											}*/
										}
									],
								]
							}
						},
						/*{		//折线图
	            name:tName,
	            type:'line',
	            smooth: true,
                smoothMonotone: 'none',
	            data: L_dataValues,//[0,0,0,0,0,23.43,23.41,22.26,21.1,23.75],
	            
	        },*/
					]
				};
				myChart2 = echarts.init(document.getElementById('chart_K'));
				// 使用刚指定的配置项和数据显示图表。
				myChart2.setOption(option2);
			}

			function windDirection(num) {
				var num = parseInt(num)
				var N = '北';
				var E = '东';
				var S = '南';
				var W = '西';
				var dir = '';

				if(num == 0 || num == 360) {
					dir = '正' + N;
				} else if(num < 90 && num > 0) {
					if(num < 45) {
						dir = N + '偏' + E + num + ' °';
					} else if(num == 45) {
						dir = E + N + num + ' °';
					} else if(num > 45) {
						dir = E + '偏' + N + (90 - num) + ' °';
					}
				} else if(num == 90) {
					dir = '正' + E;
				} else if(num < 180 && num > 90) {

					if(num < 135) {
						dir = E + '偏' + S + (num - 90) + ' °';
					} else if(num == 135) {
						dir = E + S + (num - 90) + ' °';
					} else if(num > 135) {
						dir = S + '偏' + E + (180 - num) + ' °';
					}
				} else if(num == 180) {
					dir = '正' + S;
				} else if(num < 270 && num > 180) {

					if(num < 225) {
						dir = S + '偏' + W + (num - 180) + ' °';
					} else if(num == 225) {
						dir = W + S + (num - 180) + ' °';
					} else if(num > 225) {
						dir = W + '偏' + S + (270 - num) + ' °';
					}
				} else if(num == 270) {
					dir = '正' + W;
				} else if(num < 360 && num > 270) {

					if(num < 315) {
						dir = W + '偏' + N + (num - 270) + ' °';
					} else if(num == 315) {
						dir = W + N + (num - 270) + ' °';
					} else if(num > 315) {
						dir = S + '偏' + W + (360 - num) + ' °';
					}
				}
				return dir;

			}

			
			
			/*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/  
			var timeout ; 
			var swiper = new Swiper('.swiper-container', {
				noSwiping: true,
				resistanceRatio : 0,
				//loop: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: false,
				},
				on: {
					touchStart: function(event){
		                timeout = setTimeout(function() {  
//		                    console.log('禁止')
//		                    swiper.allowTouchMove= false;//禁止
		                }, 300);  
		            },
		            touchMove: function(event){
				      	//你的事件
//				      	swiper.allowTouchMove= true;//设置
				    },
		            touchEnd: function(event){
		                //你的事件
		                swiper.allowTouchMove= true;//设置
		            },
		            tap: function(){
				      	swiper.allowTouchMove= true;//设置
				    },
				    doubleTap: function(event){
				      	swiper.allowTouchMove= true;//设置
				    },
					slideChangeTransitionEnd: function(){
		                swiper.allowTouchMove= true;//设置
		            },
				},
			});
			
			
		</script>
	</body>

</html>